<template lang="html">
    <div style="padding-right:10px;">
    <el-collapse accordion>
        <el-collapse-item>
        <template slot="title">查询<i class="header-icon el-icon-info"></i></template>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item v-for="(searchField,index) in searchFields" :label="searchField.label">
            <el-input v-model="searchForm[searchField.name]" :placeholder="searchField.label"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="loadData" >查询</el-button>
            </el-form-item>
        </el-form>
        </el-collapse-item>

    </el-collapse>
    <div style="height:35px;line-height:35px;;border-bottom:1px solid #ebeef5;">
        <el-button v-for="fun in topFunctions" :key="fun.id" @click="handleClick(fun)" type="primary " size="mini">{{fun.text}}</el-button> 
    </div>
    <el-table
        v-loading="loading"
        :data="gridData.tableData"
        style="min-width:665px">
        <el-table-column  v-for="(gridField,index) in gridFields" 
            :prop="gridField.name" 
            :label="gridField.label" 
            :show-overflow-tooltip="true">
        </el-table-column>

    
        <el-table-column :width="opsWidth" fixed="right" label="操作">
            <template slot-scope="scope" >
                <div>
                    <el-button v-for="fun in rightFunctions" :key="fun.id" @click="handleClick(fun, scope.row)" type="text" size="mini">{{fun.text}}</el-button> 
                </div>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
        </el-table-column>
    </el-table>
    <div class="page_block" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="gridData.page.currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="gridData.page.pageSize"
            :pager-count="11"
            layout="prev, pager, next, jumper,total,sizes"
            :total="gridData.page.total" >
        </el-pagination>
    </div>
    <commonForm ref="commonForm" :url="url" :addDefaultValues="addDefaultValues" @loadData="loadData" ></commonForm>
  </div>
</template>
<script>
import ltshFrame from "@/../static/js/ltshFrame";
import commonForm from "./commonForm.vue";
export default {
    data() {
        return {
            searchForm: {},
            gridHeader:[],
            gridFields:[],
            searchFields:[],
            rightFunctions:[],
            topFunctions:[],
            addDefaultValues:{},
            opsWidth:'120px',
            loading:false,
            gridData:{page:{currentPage:1,total:0, pageSize:10},tableData:[]}
        };
    },
    created() {
        var _this = this;
        // 加载字段信息
        _this.loadField();
        
    },
    mounted() {
        var _this = this;
    },
    methods: {
        /**
         * 获取字段信息
         */
        loadField() {
            var _this = this;
            _this.myUtils.appRequest({
                url: _this.url + '/index',
                method:'post',
                data:{menuId:_this.menuId},
                callback:function(data) {
                    var content = data.content;
                    _this.gridFields = content.gridFields;
                    _this.searchFields = content.searchFields;
                    _this.rightFunctions = content.rightFunctions;
                    _this.opsWidth = (_this.rightFunctions.length * 60) + 'px'
                    _this.topFunctions = content.topFunctions;
                    // 加载列表数据
                    _this.loadData();
                },
                catch: function(res) {
                    console.log(res);
                }
            }, _this);
        },
        /**
         * 获取列表数据
         */
        loadData() {
            var _this = this;
            _this.loading = true;
            _this.myUtils.appRequest({
                url: _this.url + '/pageList',
                method:'post',
                data:{pageNumber:_this.gridData.page.currentPage, pageSize:_this.gridData.page.pageSize, content:_this.searchForm},
                callback:function(data) {
                    _this.gridData.page.total = data.content.totalRow;
                    _this.gridData.page.currentPage = data.content.pageNumber;
                    _this.gridData.tableData = data.content.list;
                    _this.loading = false;
                },
                catch: function(res) {
                    console.log(res);
                    _this.loading = false;
                }
            }, _this);
        },
        setSearchFormData(addDefaultValues) {
            console.log(addDefaultValues);
            var _this = this;
            var obj = addDefaultValues[0];
            _this.searchForm[obj.name] = obj.value;
            _this.addDefaultValues = addDefaultValues;
            _this.loadData();
        },
        /**
         * 改变每页大小
         */
        handleSizeChange(val) {
            this.gridData.page.pageSize = val;
            this.loadData();
        },
        /**
         * 改变页数
         */
        handleCurrentChange(val) {
            this.gridData.page.currentPage = val;
            this.loadData();
        },
        /**
         * 列表操作点击
         */
        handleClick(fun, row) {
            var _this = this;
            if(_this.type != null && _this.type=='treeGrid') {
                _this.$emit('verifyTopBar', {fun:fun}, function(){
                   if(fun.type==1) {
                        _this.$refs.commonForm.handleClick(fun, row);
                    } else {
                        _this.$emit('otherClick', fun, row);
                    }
                });
            } else {
                if(fun.type==1) {
                    _this.$refs.commonForm.handleClick(fun, row);
                } else {
                    _this.$emit('otherClick', fun, row);
                }
            }
            
            
        },
        
    },
    props:['url', 'menuId', 'type'],
    components: { commonForm }
};
</script>
<style>
.el-form-item__label {
  width:100px;
}
</style>
